<template>
  <div>
    <div class="columns">
      <div class="column">
        <oolongDatePicker type="date" placeholder="选择日期" style="width: 200px"></oolongDatePicker>
      </div>
      <div class="column">
        <oolongDatePicker type="daterange" placement="bottom-end" placeholder="选择日期"
                          style="width: 200px"></oolongDatePicker>
      </div>
    </div>
    <br><br>
    <div class="columns">
      <div class="column">
        <oolongDatePicker type="date" :options="options1" placeholder="选择日期" style="width: 200px"></oolongDatePicker>
      </div>
      <div class="column">
        <oolongDatePicker type="daterange" :options="options2" placement="bottom-end" placeholder="选择日期"
                          style="width: 200px"></oolongDatePicker>
      </div>
    </div>
    <br><br>
    <div class="columns">
      <div class="column">
        <oolongDatePicker :value="value1" format="yyyy年MM月dd日" type="date" placeholder="选择日期"
                          style="width: 200px"></oolongDatePicker>
      </div>
      <div class="column">
        <oolongDatePicker :value="value2" format="yyyy/MM/dd" type="daterange" placement="bottom-end" placeholder="选择日期"
                          style="width: 200px"></oolongDatePicker>
      </div>
    </div>

  </div>
</template>
<script>
  export default {
    data () {
      return {
        value1: '2016-01-01',
        value2: ['2016-01-01', '2016-02-15'],
        options1: {
          shortcuts: [
            {
              text: '今天',
              value () {
                return new Date();
              },
              onClick: (picker) => {
                this.$Message.info('点击了今天');
              }
            },
            {
              text: '昨天',
              value () {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24);
                return date;
              },
              onClick: (picker) => {
                this.$Message.info('点击了昨天');
              }
            },
            {
              text: '一周前',
              value () {
                const date = new Date();
                date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
                return date;
              },
              onClick: (picker) => {
                this.$Message.info('点击了一周前');
              }
            }
          ]
        },
        options2: {
          shortcuts: [
            {
              text: '最近一周',
              value () {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                return [start, end];
              }
            },
            {
              text: '最近一个月',
              value () {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                return [start, end];
              }
            },
            {
              text: '最近三个月',
              value () {
                const end = new Date();
                const start = new Date();
                start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                return [start, end];
              }
            }
          ]
        }
      }
    }
  }
</script>
<style lang="scss" scoped>

</style>
